﻿@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@model WebshopHPWcore.Models.HistoryViewModels.HistoryViewModel
@{
    ViewData["Title"] = "Omzet";
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <title>Omzet</title>
</head>
<body>

    <h2>Omzet</h2>
    <br />
    <div><a asp-area="" asp-controller="AdminStatistics" asp-action="Index"><< Terug naar overzichten</a></div>
    <table>
        <tr>
            <td width="100px">
                <input type="radio" name="Data" id="PerDag" class="btn btn-default" checked>Per dag<br />
                <input type="radio" name="Data" id="PerMaand" class="btn btn-default" >Per maand<br />
                <input type="radio" name="Data" id="PerJaar" class="btn btn-default">Per jaar<br />
            </td>
            <td>
                <input type="radio" name="Chart" id="ChangeToLineChart" class="btn btn-default" checked>Lijndiagram<br />
                <input type="radio" name="Chart" id="ChangeToSplineChart" class="btn btn-default">Lijndiagram ronde afwerking<br />
                <input type="radio" name="Chart" id="ChangeToAreaChart" class="btn btn-default" >Lijndiagram gekleurd<br />
                <input type="radio" name="Chart" id="ChangeToSplineAreaChart" class="btn btn-default" checked>Lijndiagram ronde afwerking gekleurd<br />
            </td>
        </tr>
    </table>

    <input id="SetAmountOfItemsInChart" type="number" min="0" value="10" class="btn btn-default" />
    <button id="SetAmountOfItemsInChartSubmit" class="btn btn-default">Verander</button><br />

    
    <div id="chartContainer"></div>

    <script type="text/javascript">

        window.onload = function () {
            CanvasJS.addColorSet("pink",
                [//colorSet Array
                    "#ff3399",
                    "#f53d99",
                    "#eb4799",
                    "#e05299",
                    "#d65c99",
                    "#cc6699",
                    "#c27099",
                    "#b87a99",
                    "#ad8599",
                    "#a38f99",
                ]);
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",
                animationEnabled: true,
                title: {
                    text: "Omzet per dag"
                },
                subtitles: [
                    { text: "" }
                ],
                axisX: {
                    reversed: true,
                    maximum: 9.5,
                    title: "Datum",
                },
                axisY: {
                    title: "Aantal in euro's (€)",
                },

                data: [
                    {
                        type: "splineArea", //change type to column, bar, line, area, pie, etc
                        dataPoints: @Html.Raw(ViewBag.dataPoints3),
                    }
            ]
            });
            chart.render();
            $("#PerDag").click(function () {
                chart.options.title.text = "Omzet per dag"
                chart.options.data[0].dataPoints = @Html.Raw(ViewBag.DataPoints3);
                chart.render();
            });
            $("#PerMaand").click(function () {
                chart.options.title.text = "Omzet per maand"
                chart.options.data[0].dataPoints = @Html.Raw(ViewBag.DataPoints4);
                chart.render();
            });
            $("#PerJaar").click(function () {
                chart.options.title.text = "Omzet per Jaar"
                chart.options.data[0].dataPoints = @Html.Raw(ViewBag.DataPoints5);
                chart.render();
            });

            $("#ChangeToSplineChart").click(function () {
                chart.options.data[0].type = "spline"
                chart.render();
            });
            $("#ChangeToLineChart").click(function () {
                chart.options.data[0].type = "line"
                chart.render();
            });
            $("#ChangeToAreaChart").click(function () {
                chart.options.data[0].type = "area"
                chart.render();
            });
            $("#ChangeToSplineAreaChart").click(function () {
                chart.options.data[0].type = "splineArea"
                chart.render();
            });

            $("#SetAmountOfItemsInChartSubmit").click(function () {
                chart.options.axisX.maximum = document.getElementById("SetAmountOfItemsInChart").value - 0.5;
                chart.render();
            });
        };


    </script>
</body>
</html>	